import {request} from "../../request/index.js"

// pages/category/index.js
Page({
  data: {
    // 左侧菜单数据
    leftMenuList:[],
    // 右侧商品数据
    rightContent:[],
    // 被点击的左侧的菜单
    currentIndex:0,
    // 右侧滚动条距离顶部的距离
    scrollTop:0
  },
  // 接口的返回数据
  Cates:[],

  onLoad: function (options) {
    /* 
      1、先判断一下本地存储中有没有旧的数据,本地存储的格式如下:
      {time:Date.now(),data:[...]}
      2、没有旧数据，直接发送请求
      3、有旧数据时、同时，旧数据也没有过期 就使用 本地存储中的旧数据即可
    */
    const Cates = wx.getStorageSync("cates");
    if(!Cates){
      this.getCates();
    }else{
      // 有旧的数据，判断是否过期
      // 如果超过1分钟，就从新获取请求
      if(Date.now() - Cates.time > 6000*10){
        this.getCates();
      }else{
        // 可以使用旧数据
        this.Cates = Cates.data
        // 继续使用下面的赋值代码，把缓存的值，重新赋值给两个数组
        let leftMenuList = this.Cates.map(v=>v.cat_name)
        let rightContent = this.Cates[0].children
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },
  getCates(){
    request({url:"/categories"})
    .then(res=>{
      this.Cates = res;
      // 把接口的数据存储到本地存储中
      wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});
        
      // 构造左侧大菜单的数据
      // Array.map((数组元素, 数组元素的下标, 数组本身)=>{}[,thisArray])
      // 使用数组的.map方法，将接口中的数组数据拿出来重新赋值给一个新数组。V代表新数组中的每一项
      let leftMenuList = this.Cates.map(v=>v.cat_name)
      // 构造右侧的商品数据
      let rightContent = this.Cates[0].children
      // console.log(res);
      this.setData({
        leftMenuList,
        rightContent
      })
    })
  },

  // 左侧菜单的点击事件
  handleItemTap(e){
    let {index} = e.currentTarget.dataset
    // console.log(index);
    let rightContent = this.Cates[index].children
    this.setData({
      currentIndex:index,
      rightContent,
      // 点击的时候，让右侧的scroll-top标签的值，等于零,右侧类容距离顶部的距离
      scrollTop:0
    })
  }
})